<template>
    <div class="blog-list">
        <h1>博文列表</h1>
        <div class="article-card" style="background-color: bisque;" v-for="article in articles" :key="article.id" @click="goToDetail(article.id)">
            <h3 class="article-title">{{ article.title }}</h3>
            <p class="article-intro">{{ article.intro }}</p>
            <div class="author-info">
                <el-avatar :size="30" :src="article.author.avatar || '/default-avatar.png'" class="mr-3"></el-avatar>
                <span class="author-name">by:{{ article.author.username }} </span>
            </div>
            <div class="main-info">
                <span>发布时间:{{ article.create_time }}</span>|
                <span>阅读量:{{ article.read }}</span>
                <span>111</span>
                <span>222</span>
                <span>333</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive,onMounted} from 'vue';
import { useRouter} from 'vue-router';
import { ElMessage } from 'element-plus';
import request from '@/request';
const router = useRouter()
const articles = ref([])
onMounted(()=>{
    fetchArticles()
})
//我是加载所有文章
const fetchArticles = async()=>{
    request({
        url:'/public/articles/',
        method:'get'
    }).then(response=>{
        if(response.status==200){
            articles.value = response.data.data;
            console.log(response.data)
            ElMessage.success('获取所有文章数据成功')
        }
    }).catch(error=>{
        ElMessage.error('获取文章数据失败'+error.message)
    })
}
//跳转文章详情
const goToDetail = (id)=>{
    router.push(`/home/blog/${id}/`)
}
</script>
<style scoped>
.blog-list {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.article-card {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
.article-card:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.meta {
  color: #6b7280;
  font-size: 0.9em;
  margin-top: 10px;
}
author-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #6c757d;
}

.author-name {
  font-weight: 500;
  color: #333;
  margin-left: 8px;
}

.el-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f2f5;
}
</style>